<template>
    <div>
      <cfg-table
        ref="table"
        :columns="columns"
        :data="data"
        :loading="loading"
        :config="config"
        :pageSizeOpts="pageSizeOpts"
        :pageNavigation="pageNavigation"
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        @loadPage="loadPage"
        @handleCreate="handleCreate"
        @handleDetail="handleDetail"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleDeleteMultiple="handleDeleteMultiple"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></cfg-table>
      <quality-new-add-modal
        v-bind="addNewPanel"
        :modelType="modelType"
        :columns="formColumns"
        :rules="rules"
        @submit="handleNewAddSubmit"
        @changeItemType="changeItemType"
      ></quality-new-add-modal>
      <quality-edit-modal
        v-bind="editPanel"
        :modelType="modelType"
        :columns="formColumns"
        :rules="rules"
        @submit="handleEditSubmit"
        @changeItemType="changeItemType"
      ></quality-edit-modal>
      <quality-read-modal
        v-bind="readPanel"
        :modelType="modelType"
        :columns="columns"
        :rules="rules"
      ></quality-read-modal>
    </div>
</template>

  <script>
    import qualityNewAddModal from './parts/qualityNewAddModal.vue';
    import qualityEditModal from './parts/qualityEditModal.vue';
    import qualityReadModal from './parts/qualityReadModal.vue';
    import { typeClassName } from '@/pages/config/classNameMap';
    import mixin from '@/pages/components/mixins/mixin'
    import columnsMixin from './config'
    export default {
        components: { qualityNewAddModal, qualityEditModal, qualityReadModal },
        name: 'qualityItem',
        mixins: [mixin,columnsMixin],
        data () {
            return {
                classObject: null, // 单个实例
                collectionObject: null, // 所有实例
                className: typeClassName['qualityItem'].className,
                type: typeClassName['qualityItem'].type,
                modelType: typeClassName['qualityItem'].modelType,
                paramTypeClassObject: null, // 参数类型实例
                paramTypeModelType: typeClassName['qualityItemType'].modelType,
                paramStatusClassObject: null, // 参数状态实例
                paramStatusModelType: typeClassName['paramStatus'].modelType,
                paramCategoryClassObject: null, // 参数分类实例
                paramCategoryModelType: typeClassName['qualityItemCategory'].modelType,
                addNewPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2
                },
                editPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                readPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                rules: {
                    sf_code: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    sf_name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ]
                },
                loading: false,
                config: {
                    search: true,
                    addButton: true,
                    batchDeleteButton: true,
                    tableSizeIcon: true,
                    fullscreenIcon: true,
                    refreshIcon: false,
                    columnSettingIcon: true,
                    action: true,
                    additionalAction: false
                },
                pageSizeOpts: [10, 30, 50, 100],
                pageNavigation: { total: 0, pageSize: 10, pageNumber: 1 },
                paramTypeOptions: [],
                paramCategoryOptions: [],
                statusOptions: []
            };
        },
        computed: {
            additionalAction () {
                return [];
            },
            data () {
                if (!!this.collectionObject) {
                    return this.collectionObject.records.map(d => {
                        let item = {
                            ...d,
                            ...d.values
                        }
                        return item;
                    })
                } else {
                    return [];
                }
            }
        },
        beforeMount () {
            this.collectionObject = this.$modelObject.create(`${this.modelType}Collection`);
            this.classObject = this.$modelObject.create(this.modelType);
            this.paramTypeClassObject = this.$modelObject.create(this.paramTypeModelType);
            this.paramStatusClassObject = this.$modelObject.create(this.paramStatusModelType);
            this.paramCategoryClassObject = this.$modelObject.create(this.paramCategoryModelType);
            this.loadPage(this.pageNavigation, null);
            // 参数类型
            let paramFilter = {
                className: typeClassName['qualityItemType'].className,
                type: typeClassName['qualityItemType'].type
            }
            this.getOptions(paramFilter, this.paramTypeClassObject).then(res => {
                this.paramTypeOptions = res
            })
            // 参数状态
            let statusFilter = {
                className: typeClassName['paramStatus'].className,
                type: typeClassName['paramStatus'].type
            }
            this.getOptions(statusFilter, this.paramStatusClassObject).then(res => {
                this.statusOptions = res
            })
            // 参数分类
            let categoryFilter = {
                className: typeClassName['qualityItemCategory'].className,
                type: typeClassName['qualityItemCategory'].type
            }
            this.getOptions(categoryFilter, this.paramCategoryClassObject).then(res => {
                this.paramCategoryOptions = res
            })
        },
        mounted () {},
        methods: {
            handleNewAddSubmit (data) {
                data.className = this.className;
                data.type = this.type;
                data.name = this.tools.uuid(8);
                this.loading = true;
                this.classObject.add(data).then((flag) => {
                    if (flag) {
                        this.collectionObject.records.unshift(this.classObject.record);
                    }
                }).then(() => {
                    if (data.itemType == '单选' || data.itemType == '多选') {
                        // 注册hier
                        let pointer = { className: this.className, type: this.type, id: this.classObject.record.id }
                        this.classObject
                            .runAddRegister(pointer, { basic: data.hier.basic })
                            .then((flag) => {
                                if (flag) {
                                    this.loading = false;
                                    this.$set(this.addNewPanel.drawer, 'show', false);
                                } else {
                                    this.loading = false;
                                }
                        });
                    } else {
                        this.loading = false;
                        this.$set(this.addNewPanel.drawer, 'show', false);
                    }
                });
            },
            handleEditSubmit (data) {
                this.loading = true;
                this.classObject.setRecord(data);
                this.classObject.update().then((flag) => {
                    if (flag) {
                        let index = this.collectionObject.records.findIndex(
                            (item) => item.id === this.classObject.record.id
                        );
                        if (index !== -1) {
                            this.collectionObject.records.splice(
                                index,
                                1,
                                this.classObject.record
                            );
                        }
                    }
                }).then(() => {
                    if (data.itemType == '单选' || data.itemType == '多选') {
                        // 重新注册hier
                        let pointer = { className: this.className, type: this.type, id: this.classObject.record.id }
                        this.classObject
                            .runAllAddRegister(pointer, { basic: data.hier.basic })
                            .then((flag) => {
                                if (flag) {
                                    this.loading = false;
                                    this.$set(this.editPanel.drawer, 'show', false);
                                } else {
                                    this.loading = false;
                                }
                        });
                    } else {
                        this.loading = false;
                        this.$set(this.editPanel.drawer, 'show', false);
                    }
                });
            },
            changeItemType (type) {
                this.formColumns.forEach((d, index) => {
                    if (d.key === 'standard' || d.key === 'max' || d.key === 'min') {
                        d.config.disabled = type === '单选' || type === '多选'
                    }
                    let newItem = this.tools.lodash.cloneDeep(d)
                    this.$set(this.formColumns, index, newItem)
                })
            }
        }
    };
  </script>
  <style scoped lang="scss"></style>
